<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <link rel="stylesheet" href="../css/userInfo.css">
</head>

<body>
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>

    <div class="container">
        <div class="sidebar">
            <div class="user-nav">
                <a href="javascript:void(0)" class="nav-item" onclick="showContent('profile')">个人信息</a>
                <a href="javascript:void(0)" class="nav-item" onclick="showContent('edit')">编辑信息</a>
                <a href="javascript:void(0)" class="nav-item" onclick="showContent('logout')">登出</a>
                <a href="javascript:void(0)" class="nav-item" onclick="showContent('logoff')">注销账户</a>
            </div>
        </div>
        <div class="main-content">
            <div id="profile" class="section">
                <h1 class="title">用户信息</h1>
                <p><strong>头像:</strong>
                    <img id="userAvatar" src="" alt="用户头像" class="avatar" onerror="this.src='/resource/avatar/default-avatar.png'">
                </p>
                <p><strong>姓名:</strong> <span id="username"></span></p>
                <p><strong>电子邮件:</strong> <span id="email"></span></p>
                <p><strong>电话:</strong> <span id="phone"></span></p>
                <p><strong>性别:</strong> <span id="gender"></span></p>
                <p><strong>个人描述:</strong> <span id="description"></span></p>
            </div>

            <div id="edit" class="section" style="display:none;">
                <h2>编辑个人信息</h2>
                <form id="editForm">
                    <label for="newAvatar">修改头像:</label>
                    <input type="file" id="newAvatar" name="newAvatar" accept="image/*">

                    <label for="newName">姓名:</label>
                    <input type="text" id="newName" name="newName">

                    <label for="newEmail">邮箱:</label>
                    <input type="email" id="newEmail" name="newEmail">

                    <label for="newPhone">电话:</label>
                    <input type="tel" id="newPhone" name="newPhone">

                    <label for="newGender">性别:</label>
                    <select id="newGender" name="newGender">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>

                    <label for="newDescription">描述:</label>
                    <textarea id="newDescription" name="newDescription"></textarea>

                    <div class="form-buttons">
                        <button type="submit" class="btn-primary">保存</button>
                        <button type="button" id="closeModal" class="btn-secondary">关闭</button>
                    </div>
                </form>
            </div>

            <div id="logout" class="section" style="display:none;">
                <button id="logoutLink" class="btn-secondary">登出</button>
            </div>

            <div id="logoff" class="section" style="display:none;">
                <button id="logoffLink" class="btn-danger">注销账户</button>
            </div>
        </div>
    </div>

    <script src="../js/userInfo.js"></script>
</body>

</html>
